<html>

<head>
<title>002 属性 属性</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//attr()获取和设置属性值
	//可以传递一个参数，也可以传递两个参数
	//如果传递一个参数，代表获取属性节点的值
	//如果传递两个参数，代表设置属性节点的值

	//注意点：
	//如果是获取:无论获取多少个元素，都只会返回第一个元素指定的属性节点的值
	//如果是设置:找到多少个元素就会设置多少个元素
	//如果是设置：如果设置的属性节点不存在，那么系统会自动新增
	console.log($("img").attr("src"));
	console.log($("img").attr("title"));
	$("img").attr({ src: "https://dfimg.dfrobot.com/store/data/DFR0543/20201123%20Update/Picture%20LattePanda%20Delta_300x200.jpg", title: "Test Image" });


	$("img").attr("title", function() { 
		console.log('function '+this.alt) ; 
	});

	//removeAttr(name) 从每一个匹配的元素中删除一个属性||删除所有找到的元素指定的属性节点
	$("img").removeAttr("title");


	//prop(name|properties|key,value|fn) 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。
	//注意点:
	//prop方法不仅能够操作属性，他还能操作属性节点
	//prop和attr 使用场景：
	//官方推荐在操作属性节点是，具有true和false两个属性的属性节点，如果checked，selected或者disabled使用prop(),
	//其他的使用attr();
	$("input[type='checkbox']").prop("checked", true);
	$("input[type='checkbox']").attr("checked", true);
	$("input[type='radio']").prop("checked", false);
	$("input[type='radio']").prop("checked", function( i, val ) {
	  console.log(i,val) ;
	});

	//removeProp(name)  用来删除由.prop()方法设置的属性集
	$("input[type='checkbox']").removeProp("checked", true);
	$("input[type='radio']").removeProp("checked", true);

	//addClass(class|fn) 为每个匹配的元素添加指定的类名。
	//如果需要添加多个类名，多个类名中间用空格隔开。
	$("p").addClass("selected");
	$("p").addClass("selected1 selected2");

	$('ul li:last').addClass(function() {
	  console.log('item-' + $(this).index()) ;
	  return 'item-' + $(this).index();
	});
	

	$("p").removeClass("selected");
	$("p").toggleClass("selected");

	//文本值相关的方法
	//1.html
		//和原生JS中的innerHTML一模一样
	//2.text
		//和原生JS中的innerTEXT一模一样
	//3.val
	//$("p").html('<table><tbody id="addMaterialTbody"><tr> <td width="50"><select name="locationid[]"><option value=24>Aaland Islands </option><option value="4">库位4</option></select></td> </tr></tbody></table>'); //设置所有 p 元素的内容


			//获取国家和地区JSON文件
			var ajaxUrl = 'country.json';
			$.ajax({
				url: ajaxUrl,
				type: 'get',
				dataType: 'json',
				beforeSend: function() {
				},
				complete: function() {
				},
				success: function(result) {
					if(result.code == 1){
						console.log(result.data.countries);
						//fun(result.data.countries);
					}else{
						S_PATH.tips(result.message);
					}
				},
				error: function(xhr, ajaxOptions, thrownError) {
					console.log('Ajax Error!' + ajaxUrl)
				}
			});
		
});


</script>
</head>

<body>
<img src="https://www.dfrobot.com/static/images/logo.png"  title="DFRobot title" alt="DFRobot alt">
<img src="https://www.dfrobot.com/static/images/logo.png"  title="DFRobot title1" alt="DFRobot alt1">

<p>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input class="radio_class" type="radio" value="radio2"/> radio2
</p>



<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>
<p>我是p标签</p>


<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置val</button>
<button>获取val</button>
</body>

</html>
